 var c1 = document.querySelector("#c1");
 c1.width = window.screen.width;
 c1.height = window.screen.height;
 var ctx1 = c1.getContext('2d');


 var c2 = document.querySelector("#c2");
 c2.width = window.screen.width;
 c2.height = window.screen.height;
 var ctx2 = c2.getContext('2d');



 var an = null;

 //缓动函数

 function Linear(t, b, c, d) {
     return c * t / d + b;
 }


 //文字

 var imgData = null;
 var posData = [];
 var text = ["有你一句晚安","说的再多", "只不过铺垫", "只愿每晚"];
 var starArr = [];

 function init(t) {

     imgData = null;
     posData = [];
     if (t) {
         draw(t);
     } else {
         draw();
     }
 }
 init();

 var nnn = 0;

 document.querySelector(".ready").onclick = function () {
     this.style.display = 'none';
     ready();
 }


 function ready() {
     setInterval(function () {
         starArr.forEach(function (v) {
             v.tween.t = 0;
         });
         cancelAnimationFrame(an);
         nnn++;
         init(text[nnn]);
     }, 3000)
 }

 function draw(t) {
     c2.width = c2.width;
     ctx2.fillStyle = "#fff";
     ctx2.fillRect(0, 0, c1.width, c1.height);

     ctx2.fillStyle = "#000";
     ctx2.font = "50px Arial";
     ctx2.textAlign = "center";
     ctx2.beginPath();
     ctx2.fillText(t || text[0], c1.width / 2, c1.height / 2 - 50);
     imgData = ctx2.getImageData(0, 0, c1.width, c1.height);
     pushArr();
 }

 var cols = 180;
 var rows = 150;
 var w = parseInt(c1.width / cols);
 var h = parseInt(c1.height / rows);
 var pos = 0;

 function pushArr() {



     for (var i = 1; i <= cols; i++) {
         for (var j = 1; j <= rows; j++) {
             pos = [(j * h - 1) * c1.width + (i * w - 1)] * 4;
             if (imgData.data[pos] < 240) {
                 posData.push({
                     x: i * w,
                     y: j * h
                 });
             }
         }
     }
     hide();

 }

 function hide() {
     c2.width = c2.width;
     an = requestAnimationFrame(show);
 }

 //绘制星星


 for (var i = 0; i < 1000; i++) {
     var x = parseInt(Math.random() * c1.width),
         y = parseInt(Math.random() * c1.height)
     var r = Math.random() * 1;
     var o = Math.random() * 1;
     var index = i;
     starArr.push({
         index: index,
         oldx: x,
         oldy: y,
         x: x,
         y: y,
         r: r,
         o: o,
         state: 0,
         m: Math.random() / 100,
         tween: {
             t: 0,
             b: 0,
             c: 0,
             d: 1000,
         },
         s: function () {
             if (this.state == 0) {
                 this.o += this.m;
             } else {
                 this.o -= this.m;
             }
             if (this.o > 0.9) {
                 this.state = 1
             } else if (this.o < 0.1) {
                 this.state = 0
             }
         },
         pos: function () {
             var _this = this;
             if (_this.index < posData.length && posData[_this.index]) {
                 //  document.querySelector("#text").innerHTML = this.x + '-' + posData.length;
                 this.o = 1;
                 var xx = Linear(_this.tween.t, _this.x, posData[_this.index].x - _this.x, _this.tween.d);
                 var yy = Linear(_this.tween.t, _this.y, posData[_this.index].y - _this.y, _this.tween.d)
                 this.x = xx;
                 this.y = yy;
             } else {
                 this.x = parseInt(Linear(_this.tween.t, _this.x, _this.oldx - _this.x, _this.tween.d));
                 this.y = parseInt(Linear(_this.tween.t, _this.y, _this.oldy - _this.y, _this.tween.d));
             }
         }
     });

 }




 function show() {

     c1.width = c1.width;
     starArr.forEach(function (v) {
         v.tween.t++;
         v.pos();
         v.s();
         ctx1.fillStyle = "rgba(255,255,255," + v.o + ")";
         ctx1.fillRect(v.x, v.y, v.r, v.r);

     });
     an = requestAnimationFrame(show);

 }
 an = requestAnimationFrame(show);